<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab_1" data-toggle="tab" style="font-size: 16px;
    font-weight: bold;"><fmt:message key="loanRequest.mainApplicant"/></a></li>
        <c:if test="${loanRequest.coLoaned}">
        <li><a href="#tab_2" data-toggle="tab" style="font-size: 16px;
    font-weight: bold;"><fmt:message
                key="loanRequest.coApplicant"/></a></li>
        </c:if>
        <c:if test="${loanRequest.guaranted}">
        <li><a href="#tab_3" data-toggle="tab" style="font-size: 16px;
    font-weight: bold;"><fmt:message
                key="loanRequest.dbApplicant"/></a></li></c:if>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab_1">
            <div class="row">
                <div class="col-sm-12">
                    <p class="text-bold">
                   ${loanRequest.requestPerson.name} &nbsp; <fmt:message key="GENDER_${loanRequest.requestPerson.gender}"/> &nbsp;
                       <span id="requestorAge" ></span>
                    <fmt:formatDate value="${loanRequest.requestPerson.birthday}" type="date"/> &nbsp;
                      <span class="${(loanRequest.requestPerson.maritalStatus!=loanRequest.requestPersonCreditQuestionnaire.maritalStatus) ? 'text-danger' : ''}"> <fmt:message key="MARITAL_STATUS_${loanRequest.requestPerson.maritalStatus}"/></span> </p>
                    <p>
                      <label class="control-label text-primary"> <fmt:message key="loanPerson.mobileNo"/>:</label>
                        <span class="${(loanRequest.requestPerson.mobileNo!=loanRequest.requestPersonCreditQuestionnaire.mobileNo) ? 'text-danger' : ''}">${loanRequest.requestPerson.mobileNo}</span> (<span class="text-danger" id="mobileValidate"></span>)
                    </p>
                       <p> <label class="control-label text-primary"><fmt:message key="ID_TYPE_${loanRequest.requestPerson.idType}"/>: </label>${loanRequest.requestPerson.idNo}</p>
                    <p> <label class="control-label text-primary"><fmt:message key="loanRequest.address"/>:</label>
                        ${loanRequest.requestPerson.address.toString()} (${loanRequest.requestPerson.address.postalCode})</p>
                    <p> <label class="control-label text-primary"><fmt:message key="loanRequest.hkAddress"/>:</label>    ${loanRequest.requestPerson.hkAddress.toString()} (${loanRequest.requestPerson.hkAddress.postalCode})
                    </p>
                    <p> <label class="control-label text-primary"><fmt:message key="loanPerson.workCompany"/>:</label>
                        ${loanRequest.requestPerson.workCompany}</p>
                    <p>
                    <p>
                    <label class="control-label text-primary"><fmt:message key="loanPerson.companyAddress" />:</label>
                        ${loanRequest.requestPerson.companyAddress.toString()} (${loanRequest.requestPerson.companyAddress.postalCode})</p>

                       <p> <label class="control-label text-primary"><fmt:message key="loanPerson.liveYears"/>: </label>${loanRequest.requestPerson.liveYears} &nbsp;
                           <label class="control-label text-primary"> <fmt:message key="loanPerson.companyYears" />:</label>
                           ${loanRequest.requestPerson.companyYears}</p>
    </div>
            </div>
        </div>
        <c:if test="${loanRequest.coLoaned}">
        <div class="tab-pane" id="tab_2">
            <div class="row">
                <div class="col-sm-12">
                    <p>
                            ${loanRequest.coPerson.name} &nbsp; <fmt:message key="GENDER_${loanRequest.coPerson.gender}"/> &nbsp;
                        <span id="coAge" ></span>
                        <fmt:formatDate value="${loanRequest.coPerson.birthday}" type="date"/> &nbsp;
                        <span class="${(loanRequest.coPerson.maritalStatus!=loanRequest.coPersonCreditQuestionnaire.maritalStatus) ? 'text-danger' : ''}">
                                <fmt:message key="MARITAL_STATUS_${loanRequest.coPerson.maritalStatus}"/></span></p>
                    <p>
                        <label class="control-label text-primary"> <fmt:message key="loanPerson.mobileNo"/>:</label>
                         <span class="${(loanRequest.coPerson.mobileNo!=loanRequest.coPersonCreditQuestionnaire.mobileNo) ? 'text-danger' : ''}">
                         ${loanRequest.coPerson.mobileNo}</span> (<span class="text-danger" id="coMobileValidate"></span>)
                    </p>
                    <p> <label class="control-label text-primary"><fmt:message key="ID_TYPE_${loanRequest.coPerson.idType}"/>: </label>${loanRequest.coPerson.idNo}</p>
                    <p> <label class="control-label text-primary"><fmt:message key="loanRequest.address"/>:</label>
                            ${loanRequest.coPerson.address.toString()}</p>
                    </p>
                    <p> <label class="control-label text-primary"><fmt:message key="loanPerson.workCompany"/>:</label>
                            ${loanRequest.coPerson.workCompany}</p>
                    <p>
                    <p>
                    <label class="control-label text-primary"><fmt:message key="loanPerson.companyAddress" />:</label>
                            ${loanRequest.coPerson.companyAddress.toString()} </p>
                </div>
            </div>
        </div>
        </c:if>
        <c:if test="${loanRequest.guaranted}">
        <div class="tab-pane" id="tab_3">
            <div class="row">
                <div class="col-sm-12">
                    <p>
                            ${loanRequest.dbPerson.name} &nbsp; <fmt:message key="GENDER_${loanRequest.dbPerson.gender}"/> &nbsp;
                        <span id="coAge" ></span>
                        <fmt:formatDate value="${loanRequest.dbPerson.birthday}" type="date"/> &nbsp;
                    <span class="${(loanRequest.dbPerson.maritalStatus!=loanRequest.dbPersonCreditQuestionnaire.maritalStatus) ? 'text-danger' : ''}">
                        <fmt:message key="MARITAL_STATUS_${loanRequest.dbPerson.maritalStatus}"/></span> </p>
                    <p>
                        <label class="control-label text-primary"><fmt:message key="loanPerson.mobileNo"/>:</label>
                        <span class="${(loanRequest.dbPerson.mobileNo!=loanRequest.dbPersonCreditQuestionnaire.mobileNo) ? 'text-danger' : ''}">
                        ${loanRequest.dbPerson.mobileNo}</span> (<span class="text-danger" id="dbMobileValidate"></span>)
                    </p>
                    <p> <label class="control-label text-primary"><fmt:message key="ID_TYPE_${loanRequest.dbPerson.idType}"/>: </label>${loanRequest.dbPerson.idNo}</p>
                    <p> <label class="control-label text-primary"><fmt:message key="loanRequest.address"/>:</label>
                            ${loanRequest.dbPerson.address.toString()} </p>
                    </p>
                    <p> <label class="control-label text-primary"><fmt:message key="loanPerson.workCompany"/>:</label>
                            ${loanRequest.dbPerson.workCompany}</p>
                    <p>
                    <p>
                    <label class="control-label text-primary"><fmt:message key="loanPerson.companyAddress" />:</label>
                            ${loanRequest.dbPerson.companyAddress.toString()} </p>
                </div>
            </div>
        </div>
        </c:if>
    </div>
</div>

        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title"><fmt:message key="loanRequest.basicInfo"/></h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
                <!-- /.box-tools -->
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-sm-12">
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.vehicleModel"/>:</label>
                            ${loanRequest.getVehicleInfo()}
                        </p>
                        <p>  <label class="control-label text-primary"><fmt:message key="loanRequest.price" />:</label> ${loanRequest.price}</p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.loanProductId"/>: </label>${loanRequest.loanProduct.getProductName()}</p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.loanAmount"/>: </label>${loanRequest.loanAmount}</p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.totalLoanAmount"/>: </label> <span id="totalLoanAmount"></span></p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.downPaymentAmount"/>: </label>${loanRequest.downPaymentAmount} </p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.downPaymentRate"/>:</label> ${loanRequest.downPaymentRate}% </p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.loanYears"/>:</label> ${loanRequest.loanYears} </p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanRequest.monthPaymentAmount"/>: </label>${loanRequest.monthPaymentAmount}</p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanPerson.annualIncome"/>: </label>${loanRequest.requestPerson.annualIncome}</p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanPerson.propertyType"/>: </label><fmt:message key="PROPERTY_TYPE_${loanRequest.requestPerson.propertyType}"/></p>
                        <p> <label class="control-label text-primary">
                            <fmt:message key="loanPerson.companyNature"/>:</label>
                            <fmt:message key="COMPANY_NATURE_${loanRequest.requestPerson.companyNature}"/>
                        </p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanPerson.companyType" />:</label>
                            ${loanRequest.requestPerson.companyType}</p>
                        <p> <label class="control-label text-primary">
                            <fmt:message key="loanPerson.workPosition" />:</label>
                            <fmt:message key="WORK_POSITION_${loanRequest.requestPerson.workPosition}"/></p>
                        <p> <label class="control-label text-primary"><fmt:message key="loanPerson.educationLevel"/>:</label> <fmt:message key="EDUCATION_TYPE_${loanRequest.requestPerson.educationLevel}"/></p>

                        <p> <label class="control-label text-primary"><fmt:message key="loanPerson.occupation"/>:</label>
                            <fmt:message key="OCCUPATION_TYPE_${loanRequest.requestPerson.occupation}"/>
                        </p>


                    </div>
                    <form:hidden path="requestPerson.id"/>
                    <form:hidden path="requestPerson.name"/>
                    <form:hidden path="requestPerson.idType"/>
                    <form:hidden path="requestPerson.idNo"/>
                    <form:hidden path="requestPersonCreditQuestionnaire.id"/>
                    <form:hidden path="coPersonCreditQuestionnaire.id"/>
                    <form:hidden path="dbPersonCreditQuestionnaire.id"/>
                    <form:hidden path="status"/>
                    <form:hidden path="copyFromRequestId"/>

                    <form:hidden cssClass="form-control" path="requestPerson.annualIncome"
                                 disabled="true"
                                 id="annualIncome" maxlength="255"/>

                    <form:hidden cssClass="form-control datepicker" path="requestPerson.birthday"
                                 disabled="true"
                                 id="birthday"/>

                    <form:hidden cssClass="form-control" path="requestPerson.annualIncome"
                                 disabled="true"
                                 id="annualIncome" maxlength="255"/>

                    <form:hidden cssClass="form-control" path="requestPerson.liveYears"
                                 disabled="true"
                                 id="liveYears" maxlength="255"/>

                    <c:if test="${loanRequest.requestPerson.homeTelNo!=''}">
                        <form:hidden cssClass="form-control" path="requestPerson.homeTelNo" id="homeTelNo"
                                     disabled="true"
                                     maxlength="255"/>
                    </c:if>
                    <form:hidden cssClass="form-control" path="requestPerson.mobileNo" id="mobileNo"
                                 disabled="true"
                                 maxlength="255"/>

                    <form:hidden path="requestPerson.address.id"/>
                    <form:hidden path="requestPerson.hkAddress.id"/>
                    <form:hidden path="requestPerson.companyAddress.id"/>
                    <form:hidden cssClass="form-control phone" path="requestPerson.workTelNo"
                                 disabled="true"
                                 id="workTelNo" maxlength="255"/>
                    <form:hidden cssClass="form-control" path="urgentContactTelNo1" disabled="true"
                                 id="urgentContactTelNo1"
                                 maxlength="255"/>
                    <c:if test="${not empty loanRequest.urgentContactName2}">
                        <form:hidden cssClass="form-control" path="urgentContactTelNo2" disabled="true"
                                     id="urgentContactTelNo2"
                                     maxlength="255"/>
                    </c:if>
                    <c:if test="${not empty loanRequest.urgentContactName3}">

                        <form:hidden cssClass="form-control" path="urgentContactTelNo3" disabled="true"
                                     id="urgentContactTelNo3"
                                     maxlength="255"/>
                    </c:if>
                    <c:if test="${loanRequest.isCoLoaned()}">
                        <form:hidden cssClass="form-control" path="coPerson.mobileNo" id="coMobileNo"
                                     disabled="true"
                                     maxlength="255"/>
                    </c:if>
                    <c:if test="${loanRequest.isGuaranted()}">
                        <form:hidden cssClass="form-control" path="dbPerson.mobileNo" id="dbMobileNo"
                                     disabled="true"
                                     maxlength="255"/>
                    </c:if>
                </div>

            </div>
        </div>

<div class="box box-warning">
    <div class="box-header with-border">
        <h3 class="box-title"><fmt:message key="loanRequest.urgentContact"/></h3>
        <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
        <!-- /.box-tools -->
    </div>
    <div class="box-body">
            <p>
                <label class="control-label text-primary"><fmt:message key="loanRequest.urgentContact1" />:</label> <br/>
                ${loanRequest.urgentContactName1} (
                <fmt:message key="GENDER_${loanRequest.urgentContactGender1}"/> )
                <fmt:message key="loanRequest.mobileNo" />:
                ${loanRequest.urgentContactTelNo1}
                (<span class="text-danger" id="urgentContactTelNo1Validate"></span>)
                ${loanRequest.urgentContactRelation1}
            </p>
            <c:if test="${not empty loanRequest.urgentContactName2}">
                <p>
                    <label class="control-label text-primary"><fmt:message key="loanRequest.urgentContact2"/>:</label><br/>
                        ${loanRequest.urgentContactName2}(
                    <fmt:message key="GENDER_${loanRequest.urgentContactGender2}"/>)
                    <fmt:message key="loanRequest.mobileNo" />:
                        ${loanRequest.urgentContactTelNo2}
                    (<span class="text-danger" id="urgentContactTelNo2Validate"></span>)
                        ${loanRequest.urgentContactRelation2}
                </p>
            </c:if>
            <c:if test="${not empty loanRequest.urgentContactName3}">
                <p>
                    <label class="control-label text-primary"><fmt:message key="loanRequest.urgentContact3"/>:</label><br/>
                        ${loanRequest.urgentContactName3}(
                    <fmt:message key="GENDER_${loanRequest.urgentContactGender3}"/>:
                    <fmt:message key="loanRequest.mobileNo"/>:
                        ${loanRequest.urgentContactTelNo3}
                    (<span class="text-danger" id="urgentContactTelNo3Validate"></span>)
                        ${loanRequest.urgentContactRelation3}
                </p>
            </c:if>
    </div>
</div>

            <input value="${loanRequest.second}" id="loanRequestSecond" hidden/>
                    <input value="${loanRequest.vehicleBrand}" id="vehicleBrandValue" hidden/>
                        <form:hidden cssClass="form-control" path="downPaymentRate" id="downPaymentRate"
                                    disabled="true"
                                    maxlength="255"/>
                    <input value="${loanRequest.vehicleSeries}" id="vehicleSeriesValue" hidden/>

                            <form:hidden cssClass="form-control" path="feeRate" id="feeRate" disabled="true"
                                        maxlength="255"/>
                    <input value="${loanRequest.vehicleModel}" id="vehicleModelValue" hidden/>
                        <form:hidden cssClass="form-control" path="loanRate" id="loanRate" maxlength="255"
                                    readonly="true"/>
                    <form:hidden cssClass="form-control" path="ManufacturerPrice" id="manufacturerPrice"
                                maxlength="255" readonly="true"/>
                    <form:hidden cssClass="form-control" path="downPaymentAmount" id="downPaymentAmount"
                                disabled="true"
                                maxlength="255"/>
                    <form:hidden cssClass="form-control" path="price" id="price" maxlength="255"
                                disabled="true"/>
                    
                    <form:hidden cssClass="form-control" path="loanAmount" id="loanAmount"
                                maxlength="255" readonly="true"/>
                <input hidden value="${loanRequest.dealer.bond.id}" id="bondId"/>
                <input hidden value="${loanRequest.loanProductId}" id="loanProductIdValue"/>

<input hidden value="${loanRequest.loanProductId}" id="loanProduct"/>
                <input hidden value="${loanRequest.loanYears}" id="loanYearsValue"/>
<input hidden value="${loanRequest.loanYears}" id="loanYears"/>

                    <form:hidden cssClass="form-control" path="monthPaymentAmount" id="monthPaymentAmount"
                                readonly="true"
                                maxlength="255"/>

                    <form:hidden cssClass="form-control" path="totalReturnAmount" id="totalReturnAmount"
                                maxlength="255" readonly="true"/>
